<!DOCTYPE HTML>
<html>

<!-- Mirrored from show.metinfo.cn/muban/M1156008/328/news/shownews.php?lang=cn&id=62 by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jan 2018 13:44:28 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
<title>从微信、钉钉等APP，看六种常见的loading 加载设计</title>
<meta name="renderer" content="webkit">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="generator" content="MetInfo 5.3.19"  data-variable="https://show.metinfo.cn/muban/M1156008/328/,cn,109,62,2,M1156008" />
<meta name="description" content="　　         大多数App都要与服务器进行数据的交换，App向服务器发出数据请求，服务器接收到请求之后向App传输相应数据，App接收成功后显示数据内容，没有接收成功则反馈数据接收失败。　　在这个数据交换过程中，由于网络原因，需要花费一定时间，也就是说用户要等待加载完成，这个时候就要用到loading加载机制，它告诉用户，App正在努力为您" />
<meta name="keywords" content="互联网|网站建设|IT行业" />
<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="../templates/M1156008/cache/metinfo.css">
<!--[if IE 9]>
<link rel="stylesheet" href="https://show.metinfo.cn/muban/M1156008/328/templates/M1156008/cache/metinfo-ie9-1.css">
<link rel="stylesheet" href="https://show.metinfo.cn/muban/M1156008/328/templates/M1156008/cache/metinfo-ie9-2.css">
<link rel="stylesheet" href="https://show.metinfo.cn/muban/M1156008/328/templates/M1156008/cache/metinfo-ie9-3.css">
<link rel="stylesheet" href="https://show.metinfo.cn/muban/M1156008/328/templates/M1156008/cache/metinfo-ie9-4.css">
<![endif]-->
<!--[if lt IE 10]>
<script src="https://show.metinfo.cn/muban/M1156008/328/app/system/include/static/vendor/media-match/media.match.min.js"></script>
<script src="https://show.metinfo.cn/muban/M1156008/328/app/system/include/static/vendor/respond/respond.min.js"></script>
<script src="https://show.metinfo.cn/muban/M1156008/328/app/system/include/static/js/classList.min.js"></script>
<![endif]-->

</head>

<body class="active">

<header role="heading" class="active">
  <div class="head-box">  
    <div class="head-top">
      <div class="logo-box">
        <a href="../index.html" title="互联网网站模板|IT行业网站模板">
          <img src="../upload/201611/1480412957.png" title="互联网网站模板|IT行业网站模板" alt="互联网网站模板|IT行业网站模板">
        </a>
      </div>

      <div class="jodo-box">
	    <p><img src="../../../../../images.metinfo.cn/muban/M1156008/328/upload/201611/1422258610.jpg" alt="扫一扫微信二维码"/></p>

		<p>扫一扫微信二维码 <em class="fa fa-mobile-phone"></em></p>

	  </div>

    </div>
	<div class="nav-cut">
	  <ul>

		<li class="nav1 "><a href="../index.html" title="精彩首页">精彩首页</a></li>

		<li class="nav1 ">
		  <a href="../product/index.html"  title="产品中心" data-alert="全部">产品中心</a>

		  <ul>

			<li class="nav2">
			  <a href="../product/product2a95.html?lang=cn&amp;class2=105"  title="高端定制网站" data-alert="全部">高端定制网站</a>

			  <ul>

				<li class="nav3"><a href="../product/product70dd.html?lang=cn&amp;class3=115"  title="响应式建站">响应式建站</a></li>

				<li class="nav3"><a href="../product/productf220.html?lang=cn&amp;class3=116"  title="PC端建站">PC端建站</a></li>

			  </ul>

			</li>

			<li class="nav2">
			  <a href="../product/product6029.html?lang=cn&amp;class2=106"  title="移动网站建设" data-alert="全部">移动网站建设</a>

			  <ul>

				<li class="nav3"><a href="../product/product4c7e.html?lang=cn&amp;class3=133"  title="手机端建站">手机端建站</a></li>

				<li class="nav3"><a href="../product/product7787.html?lang=cn&amp;class3=134"  title="微信端建站">微信端建站</a></li>

			  </ul>

			</li>

			<li class="nav2">
			  <a href="../product/producteb39.html?lang=cn&amp;class2=107"  title="业务系统研发" data-alert="全部">业务系统研发</a>

			</li>

			<li class="nav2">
			  <a href="../product/product6bba.html?lang=cn&amp;class2=108"  title="服务器运维" data-alert="全部">服务器运维</a>

			</li>

			<li class="nav2">
			  <a href="../product/product09ae.html?lang=cn&amp;class2=131"  title="APP应用程序" data-alert="全部">APP应用程序</a>

			</li>

			<li class="nav2">
			  <a href="../product/productd10b.html?lang=cn&amp;class2=132"  title="UI 美工设计" data-alert="全部">UI 美工设计</a>

			</li>

		  </ul>

		</li>

		<li class="nav1 active">
		  <a href="index.html"  title="新闻资讯" data-alert="全部">新闻资讯</a>

		  <ul>

			<li class="nav2">
			  <a href="news5a42.html?lang=cn&amp;class2=109"  title="公司新闻" data-alert="全部">公司新闻</a>

			</li>

			<li class="nav2">
			  <a href="news5fa0.html?lang=cn&amp;class2=110"  title="行业资讯" data-alert="全部">行业资讯</a>

			</li>

		  </ul>

		</li>

		<li class="nav1 ">
		  <a href="../show/index.html"  title="关于我们" data-alert="全部">关于我们</a>

		</li>

		<li class="nav1 ">
		  <a href="../img/index.html"  title="案例展示" data-alert="全部">案例展示</a>

		</li>

		<li class="background"></li>
	  </ul>
	</div>
    <div class="head-bottom">
      <div class="foto-box">

			<div class="social-box">

				<a href="http://crm2.qq.com/page/portalpage/wpa.php?uin=4000084433&amp;aty=0&amp;a=0&amp;curl=&amp;ty=1" rel="nofollow" target="_blank">
					<i class="fa fa-qq"></i>
				</a>

				<a href="#" rel="nofollow" target="_blank"><i class="fa fa-weibo"></i></a>

				<a id="met-weixin"><i class="fa fa-weixin"></i></a>
				<div id="met-weixin-content" class="hide">
					<div class="text-center met-weixin-img"><img src="../../../../../images.metinfo.cn/muban/M1156008/328/upload/201611/1422258610.jpg" /></div>
				</div>

			</div>

        <div class="foto-cut">高端定制，品牌设计</div>
        <div class="powered_by_metinfo">Powered&nbsp;by&nbsp;<a href="http://www.metinfo.cn/" target="_blank" title="企业网站管理系统">MetInfo&nbsp;5.3.19</a></div>

 
      </div>
    </div>    
  </div>
</header>

<section role="main" class="subpage active">
  <div class="main-box">

<div class="sidebar-header active">
  <div class="sidebar-icon active">
    <i class="fa fa-arrow-left"></i>
    <i class="fa fa-th-list"></i>
  </div>
  <div class="sidebar-nav">
    <ol>全部</ol>
    <ul>
	
		<li class=""><a href="index.html"  title="全部">全部</a></li>

		<li class="active">

			<a href="news5a42.html?lang=cn&amp;class2=109" title="公司新闻" class="active">公司新闻</a>

		</li>

		<li class="">

			<a href="news5fa0.html?lang=cn&amp;class2=110" title="行业资讯" class="">行业资讯</a>

		</li>

	</ul>
  </div>

  <div class="sidebar-search">
    <form method="get" action="http://show.metinfo.cn/muban/M1156008/328/search/">
      <input type="hidden" name="lang" value="cn" />
      <input type="hidden" name="class1" value="100" />
      <input type="search" name="searchword" class="searchword" placeholder="search" />
      <input type="submit" class="hidden" value=" " />
      <i class="fa fa-search"></i>
    </form>
  </div>
		
	
	
</div>

<div class="information-table">
  <div class="information-row">
    <div class="information-descript info1">
      <div class="information-title">
        <h1>从微信、钉钉等APP，看六种常见的loading 加载设计</h1>
        <em>
          <u>阅读</u>
          <i class="fa fa-eye"></i> 
          131 
          &nbsp;·&nbsp; 
          <u>发布日期</u>
          <i class="fa fa-clock-o"></i> 
          2016-11-29 13:59:26
          &nbsp;·&nbsp;
          <i class="fa fa-smile-o"></i> 
          郭浩
        </em>
      </div>
      <div class="information-content">
	    <div><center><img class="attachment-full size-full" class="imgload" style="height:200px;" data-original="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089335-1004-2016-loading.jpg?imageView2/2/w/1920/h/1080" sizes="(max-width: 1920px) 100vw, 1920px" srcset="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089335-1004-2016-loading.jpg?imageView2/2/w/1920/h/1080 1920w, http://img.yixieshi.com/wp-content/uploads/2016/11/1479089335-1004-2016-loading-768x432.jpg 768w, http://img.yixieshi.com/wp-content/uploads/2016/11/1479089335-1004-2016-loading-220x124.jpg 220w" alt="1479089335-1004-2016-loading" width="1920" height="1080" data-tag="bdshare" style="display: block; margin: 20px auto; max-width: 100%; height: auto !important; background-image: none; background-attachment: scroll; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0px 0px; background-repeat: repeat;"/></center><p><br/></p><p>　　</p><p>&nbsp;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; 大多数App都要与服务器进行数据的交换，App向服务器发出数据请求，服务器接收到请求之后向App传输相应数据，App接收成功后显示数据内容，没有接收成功则反馈数据接收失败。</p><p>　　在这个数据交换过程中，由于网络原因，需要花费一定时间，也就是说用户要等待加载完成，这个时候就要用到loading加载机制，它告诉用户，App正在努力为您加载数据，您稍安勿躁。好的loading设计能减弱用户的等待焦虑，不合理的loading设计就会让用户骂爹骂娘了。</p><p>　　标题栏loading：微信、钉钉</p><p><br/></p><center><center><img class="attachment-full size-full" class="imgload" style="height:200px;" data-original="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089338-8283-1114.jpg?imageView2/2/w/740/h/659" sizes="(max-width: 740px) 100vw, 740px" srcset="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089338-8283-1114.jpg?imageView2/2/w/740/h/659 740w, http://img.yixieshi.com/wp-content/uploads/2016/11/1479089338-8283-1114-168x150.jpg 168w" alt="1479089338-8283-1114" width="740" height="659" data-tag="bdshare" style="display: block; margin: 20px auto; max-width: 100%; height: auto !important; background-image: none; background-attachment: scroll; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0px 0px; background-repeat: repeat;"/></center></center><p><br/></p><p>　　钉钉&amp;微信</p><p>　　微信、钉钉等都采用了这种形式。聊天列表页的聊天记录是储存在本地的，所以页面内容不为空。这个时候加载无需获取用户的视觉焦点，只要在标题栏展示App正在加载，加载成功则标题栏loading消失，若因为网络错误未连接服务器，则在标题栏显示未连接状态。</p><p>　　白屏loading</p><p><br/></p><center><center><img class="attachment-full size-full" class="imgload" style="height:200px;" data-original="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089337-5329-1114.jpg?imageView2/2/w/740/h/659" sizes="(max-width: 740px) 100vw, 740px" srcset="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089337-5329-1114.jpg?imageView2/2/w/740/h/659 740w, http://img.yixieshi.com/wp-content/uploads/2016/11/1479089337-5329-1114-168x150.jpg 168w" alt="1479089337-5329-1114" width="740" height="659" data-tag="bdshare" style="display: block; margin: 20px auto; max-width: 100%; height: auto !important; background-image: none; background-attachment: scroll; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0px 0px; background-repeat: repeat;"/></center></center><p><br/></p><p>　　当页面内容比较单一，需要一次性加载完成才显示，则采用这种白屏加载样式。这种加载方式用户在完全加载完成之前是看不到任何内容的，所以一旦超过时间太久一定要提示用户什么原因加载失败，而不是一直在那转啊转。同时将加载图标做得更有趣些，也会减轻用户等待时的焦虑(上面右图就比左图更让用户感觉良好)。</p><p>　　进度条</p><p><br/></p><center><center><img class="attachment-full size-full" class="imgload" style="height:200px;" data-original="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089340-3326-1114.jpg?imageView2/2/w/740/h/659" sizes="(max-width: 740px) 100vw, 740px" srcset="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089340-3326-1114.jpg?imageView2/2/w/740/h/659 740w, http://img.yixieshi.com/wp-content/uploads/2016/11/1479089340-3326-1114-168x150.jpg 168w" alt="1479089340-3326-1114" width="740" height="659" data-tag="bdshare" style="display: block; margin: 20px auto; max-width: 100%; height: auto !important; background-image: none; background-attachment: scroll; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0px 0px; background-repeat: repeat;"/></center></center><p><br/></p><p>　　Safari&amp;微信</p><p>　　进度条的加载样式，多见于浏览器，包括PC端和移动端的浏览器。一些App页面会用H5的形式去做，这种页面多数也都会采用进度条的样式来显示loading过程。</p><p>　　toast</p><p><br/></p><center><center><img class="attachment-full size-full" class="imgload" style="height:200px;" data-original="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089339-7985-1114.jpg?imageView2/2/w/740/h/659" sizes="(max-width: 740px) 100vw, 740px" srcset="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089339-7985-1114.jpg?imageView2/2/w/740/h/659 740w, http://img.yixieshi.com/wp-content/uploads/2016/11/1479089339-7985-1114-168x150.jpg 168w" alt="1479089339-7985-1114" width="740" height="659" data-tag="bdshare" style="display: block; margin: 20px auto; max-width: 100%; height: auto !important; background-image: none; background-attachment: scroll; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0px 0px; background-repeat: repeat;"/></center></center><p><br/></p><p>　　当用户执行了某个操作时，为了防止用户继续操作导致数据加载失败，则用Toast的样式来提示正在加载，同时限制用户继续操作。这种情况用户一般只能执行返回到上一级页面的操作，其他操作都被禁用。</p><p>　　为了防止数据一直加载不出来，可以在Toast上加个取消按钮，让用户主动停止加载状态，由于加载数据失败的情况极少出现，所以在Toast上加取消按钮的App并不多。</p><p>　　下拉刷新</p><p><br/></p><center><center><img class="attachment-full size-full" class="imgload" style="height:200px;" data-original="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089339-5816-1114.jpg?imageView2/2/w/740/h/659" sizes="(max-width: 740px) 100vw, 740px" srcset="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089339-5816-1114.jpg?imageView2/2/w/740/h/659 740w, http://img.yixieshi.com/wp-content/uploads/2016/11/1479089339-5816-1114-168x150.jpg 168w" alt="1479089339-5816-1114" width="740" height="659" data-tag="bdshare" style="display: block; margin: 20px auto; max-width: 100%; height: auto !important; background-image: none; background-attachment: scroll; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0px 0px; background-repeat: repeat;"/></center></center><p><br/></p><p>　　下拉刷新广泛被运用于大多数App，这种加载机制，保证了用户能看到本地缓存数据的前提下，还能告知用户页面正在刷新，同时，用户还可以通过下拉的手势操作来自己选择重新加载数据，一定程度上满足了强迫症患者。</p><p>　　预设图/占位符</p><p><br/></p><center><center><img class="attachment-full size-full" class="imgload" style="height:200px;" data-original="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089340-7298-1114.jpg?imageView2/2/w/740/h/659" sizes="(max-width: 740px) 100vw, 740px" srcset="http://img.yixieshi.com/wp-content/uploads/2016/11/1479089340-7298-1114.jpg?imageView2/2/w/740/h/659 740w, http://img.yixieshi.com/wp-content/uploads/2016/11/1479089340-7298-1114-168x150.jpg 168w" alt="1479089340-7298-1114" width="740" height="659" data-tag="bdshare" style="display: block; margin: 20px auto; max-width: 100%; height: auto !important; background-image: none; background-attachment: scroll; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0px 0px; background-repeat: repeat;"/></center></center><p><br/></p><p>　　当页面的框架固定时，只需要加载框架内数据时，采用这种刷新样式，即先加载框架，再加载框架内的数据。为了反之框架内的内容为空，会用占位符或者预设图片来填充。</p><p>　　上面简单将六种常见的loading加载样式介绍了一下，样式虽然有六种，但是其实只有两种加载原理：一种是整体加载页面数据，加载完成后一次显示;第二种是先加载部分内容，再加载剩余内容(先加载文字再加载图片;先加载框架再加载框架内的数据)。</p><p>　　我常说的一句话是设计形式永远是服务于产品功能的，而产品功能则是为了满足用户需求。了解了这些loading加载的设计形式，进一步深度思考一下：这些形式是为了减少用户等待数据加载时的焦虑感。那么有没有更好的机制来降低用户等待时的焦虑感?当然有。</p><p>　　第一：优化App的加载算法，使得App与服务器交互数据的时间简短。这个需要开发人员的精益求精了。这个是从根本上解决了问题，因为直接减少了加载数据的时间，也就是减少了用户需要等待的时间。</p><p>　　第二：采用预加载机制。拿阅读App打比方，当用户在看第一页的时候，App在后台加载完后面的几页，等用户翻到第二页的时候就不需要等待加载了，因为App已经帮用户提前加载好了。这种加载机制对用户体验特别好，但是存在一个问题，就是要预测用户行为，加载其他数据，这样会消耗不少流量，所以建议在WiFi网络环境下采取这种预加载机制，而在蜂窝网络状态下则不采用预加载机制。这个要和开发人员讨论沟通，确保预加载机制完美运行。</p><p>　　第三：异步处理。这一点做得好的App莫过于Instagram，不知道你有没有发现，用Instagram的时候会觉得特别流畅，即使在网络不好的情况下。这是为什么?因为在网络不好的情况下，你给好友点了赞，Instagram并不会提示你网络不好，操作失败，而是提示你点赞成功了，其实将它只是将你点赞的操作记录了下来，等网络一好就将点赞的行为上传到服务器，从而完成点赞行为。这就是减少用户的操作负担，让产品自己去解决问题，而不是把问题抛给用户。</p><p>　　请记住，目前App常见的loading加载样式就这六种，当然还有其他的加载设计样式，但是这有什么关系?你已经掌握了产品加载的原理，真正理解了加载机制，这样你才可以不变应万变。</p><p><br/></p><div id="metinfo_additional"></div><br /><span>标签:&nbsp&nbsp<a href="../search/search61b5.html?class1=&amp;class2=&amp;class3=&amp;searchtype=0&amp;searchword=&amp;lang=cn" target="_blank" title="链接关键词"></a>&nbsp<a href="../search/search7747.html?class1=&amp;class2=&amp;class3=&amp;searchtype=0&amp;searchword=%E5%BE%AE%E4%BF%A1&amp;lang=cn" target="_blank" title="链接关键词">微信</a>&nbsp<a href="../search/search2a64.html?class1=&amp;class2=&amp;class3=&amp;searchtype=0&amp;searchword=%E9%92%89%E9%92%89%E7%AD%89APP&amp;lang=cn" target="_blank" title="链接关键词">钉钉等APP</a>&nbsp<a href="../search/searchbc18.html?class1=&amp;class2=&amp;class3=&amp;searchtype=0&amp;searchword=loading+%E5%8A%A0%E8%BD%BD&amp;lang=cn" target="_blank" title="链接关键词">loading 加载</a></span></div>
	  </div>
    </div>

    <div class="information-hots">
      <div>
        <h3>为您推荐</h3>
        <ul>

          <li>
            <a href="shownews05fc.html?lang=cn&amp;id=55" title="工作总结：两个真实产品案例所引发的思考" target='_self'>
              <img  data-original="https://images.metinfo.cn/muban/M1156008/328/upload/201612/1481260084118604.jpg?x-oss-process=image/resize,m_fill,h_250,w_350,limit_0" title="工作总结：两个真实产品案例所引发的思考" >
              <span>工作总结：两个真实产品案例所引发的思考</span>
              <font><i class="fa fa-clock-o"></i> 2017-11-15</font>
            </a>
          </li>

          <li>
            <a href="shownews15d3.html?lang=cn&amp;id=56" title="做产品用得上的7个心理学理论" target='_self'>
              <img  data-original="https://images.metinfo.cn/muban/M1156008/328/upload/201612/1481260723.jpg?x-oss-process=image/resize,m_fill,h_250,w_350,limit_0" title="做产品用得上的7个心理学理论" >
              <span>做产品用得上的7个心理学理论</span>
              <font><i class="fa fa-clock-o"></i> 2017-10-07</font>
            </a>
          </li>

          <li>
            <a href="shownews4130.html?lang=cn&amp;id=57" title="其实，设计LOGO并不难！用对工具，你也可以成为设计师！" target='_self'>
              <img  data-original="https://images.metinfo.cn/muban/M1156008/328/upload/201612/1481260698.jpg?x-oss-process=image/resize,m_fill,h_250,w_350,limit_0" title="其实，设计LOGO并不难！用对工具，你也可以成为设计师！" >
              <span>其实，设计LOGO并不难！用对工具，你也可以成为设计师！</span>
              <font><i class="fa fa-clock-o"></i> 2017-08-21</font>
            </a>
          </li>

          <li>
            <a href="shownewsda1e.html?lang=cn&amp;id=58" title="产品都免费了，还做不起来?免费模式背后的深究与思考" target='_self'>
              <img  data-original="https://images.metinfo.cn/muban/M1156008/328/upload/201612/1481261973.png?x-oss-process=image/resize,m_fill,h_250,w_350,limit_0" title="产品都免费了，还做不起来?免费模式背后的深究与思考" >
              <span>产品都免费了，还做不起来?免费模式背后的深究与思考</span>
              <font><i class="fa fa-clock-o"></i> 2017-05-14</font>
            </a>
          </li>

          <li>
            <a href="shownews4f3c.html?lang=cn&amp;id=59" title="APP的注册和登录功能设计" target='_self'>
              <img  data-original="https://images.metinfo.cn/muban/M1156008/328/upload/201612/1481262873.jpg?x-oss-process=image/resize,m_fill,h_250,w_350,limit_0" title="APP的注册和登录功能设计" >
              <span>APP的注册和登录功能设计</span>
              <font><i class="fa fa-clock-o"></i> 2017-02-28</font>
            </a>
          </li>

          <li>
            <a href="shownewsb7f3.html?lang=cn&amp;id=60" title="一气呵成的需求文档，要清楚3点撰写思路和这些小tips" target='_self'>
              <img  data-original="https://images.metinfo.cn/muban/M1156008/328/upload/201612/1481262610.jpg?x-oss-process=image/resize,m_fill,h_250,w_350,limit_0" title="一气呵成的需求文档，要清楚3点撰写思路和这些小tips" >
              <span>一气呵成的需求文档，要清楚3点撰写思路和这些小tips</span>
              <font><i class="fa fa-clock-o"></i> 2017-01-01</font>
            </a>
          </li>

        </ul>
      </div>
    </div>

  </div>
</div>
<div class="page-main">

	<ul class="pager pager-round">
		<li class="previous disabled">
			<a href="#" title="没有了">
				上一篇
				<span aria-hidden="true" class='hidden-xs'>：没有了</span> 
			</a>
		</li>
		<li class="next ">
			<a href="shownews9990.html?lang=cn&amp;id=61" title="APP的内容布局设计，需要考虑的设计因素和原则">
				下一篇
				<span aria-hidden="true" class='hidden-xs'>：APP的内容布局设计，需要考虑的设计因素和原则</span>
			</a>
		</li>
	</ul>
</div>

<button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide">
  <i class="icon wb-chevron-up" aria-hidden="true"></i>
</button>



<script src="../templates/M1156008/cache/metinfo.js"></script>

</div>

<footer ><p>互联网 版权所有 2008-2016 粤ICP备0123456789-1 </p>
</footer>

</section>

<div class="modal fade modal-3d-flip-vertical" id="met-langlist-modal" aria-hidden="true" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-center modal-lg">
		<div class="modal-content">
			<div class="modal-body">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<div class="row">

					<div class="col-md-4 col-sm-6 col-xs-12 margin-bottom-20">
						<a href="../index.html" class="btn btn-block btn-outline btn-default btn-squared text-nowrap" title="简体中文">
							<span class="flag-icon flag-icon-cn pull-left"></span>
							简体中文
						</a>
					</div>

					<div class="col-md-4 col-sm-6 col-xs-12 margin-bottom-20">
						<a href="../index9ed2.html?lang=en" class="btn btn-block btn-outline btn-default btn-squared text-nowrap" title="English">
							<span class="flag-icon flag-icon-gb pull-left"></span>
							English
						</a>
					</div>

					<div class="col-md-4 col-sm-6 col-xs-12 margin-bottom-20">
						<a href="../index7339.html?lang=tc" class="btn btn-block btn-outline btn-default btn-squared text-nowrap" title="繁体中文">
							<span class="flag-icon flag-icon-cn pull-left"></span>
							繁体中文
						</a>
					</div>

				</div>
			</div>
		</div>
	</div>
</div>

</body>

<!-- Mirrored from show.metinfo.cn/muban/M1156008/328/news/shownews.php?lang=cn&id=62 by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jan 2018 13:44:29 GMT -->
</html>